<template>
  <div>
    <!-- 判断是否需要递归 -->
    <parent v-if="parent.parent" :parent="parent.parent" @reply="reply_digui"></parent>
    <div class="comment_son">
      <span>
        <i>@{{parent.user.nickname}}</i> :
      </span>
      <!-- 点击回复 传id 子传父 -->
      <p @click="reply(parent.id)">{{parent.content}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["parent"], // 递归时 接受的parent
  name: "parent", // 递归组件的前提
  methods: {
    reply() {
      // 最外层被点击 直接发送给父组件
      this.$emit("reply", this.parent.id);
    },
    // 递归组件点击时执行的函数 在递归组件<parent @reply="reply_digui" .. 时绑定了事件
    reply_digui(id) {
      this.$emit("reply", id);
    }
  }
};
</script>

<style lang="less" scoped>
.comment_son {
  width: 94.444vw;
  margin: auto;
  margin-bottom: 2.778vw;
  border-radius: 2.222vw;
  border: 1px solid #000;
  display: flex;
  //   align-items: center;
  flex-direction: column;
  > span {
    color: orange;
    padding: 2.778vw;
    font-weight: 700;
  }
  p {
    padding: 4.167vw;
    flex: 1;
  }
}
</style>